/* ------------------------------------------------------------------ */
/* 9) Début css ads banner */

/* Container principal commun */
.banniere-pub {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: flex-start; /* Aligne en haut */
    flex-wrap: wrap;         /* Autorise le passage à la ligne */
    width: 100%;             /* Pleine largeur */
    max-width: 550px;        /* Limite sur grand écran */
	padding-left:0px;
	padding-bottom:20px;
	padding-top:20px;
}

/* Formats de petites publicités */
/* Petite pub horizontale (16∶9) */
.small_horizontal_ads[data-type="s_hor_ads"] {
    width: 250px;
    aspect-ratio: 16 / 9;    /* Conserve le ratio 16/9 */
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_horizontal_ads[data-type="s_hor_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Petite pub verticale (9∶16) */
.small_vertical_ads[data-type="s_ver_ads"] {
    width: 141px;
    aspect-ratio: 9 / 16;
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_vertical_ads[data-type="s_ver_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Petite pub carrée (1∶1) */
.small_square_ads[data-type="s_sq_ads"] {
    width: 250px;
    aspect-ratio: 1 / 1;
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_square_ads[data-type="s_sq_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Formats de grandes publicités */
/* Grande pub horizontale (16∶9) */
.large_horizontal_ads[data-type="l_hor_ads"] {
    width: 500px;
    aspect-ratio: 16 / 9;
    margin: 0;
    text-align: center;
    position: relative;
}
.large_horizontal_ads[data-type="l_hor_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Grande pub verticale (9∶16) */
.large_vertical_ads[data-type="l_ver_ads"] {
    width: 282px;
    aspect-ratio: 9 / 16;
    margin: 10px;
    text-align: center;
    position: relative;
}
.large_vertical_ads[data-type="l_ver_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Grande pub carrée (1∶1) */
.large_square_ads[data-type="l_sq_ads"] {
    width: 500px;
    aspect-ratio: 1 / 1;
    margin: 10px;
    text-align: center;
    position: relative;
}
.large_square_ads[data-type="l_sq_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* ---------- FORMATS STANDARDS ---------- */

/* SMALL - HORIZONTAL */

/* 320x50 – Mobile Leaderboard */
.small_horizontal_ads[data-type="s_std_hor_ml_ads"] {
    width: 320px;
    height: 50px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_horizontal_ads[data-type="s_std_hor_ml_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 320x100 – Large Mobile Banner */
.small_horizontal_ads[data-type="s_std_hor_lmb_ads"] {
    width: 320px;
    height: 100px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_horizontal_ads[data-type="s_std_hor_lmb_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 468x60 – Full Banner */
.small_horizontal_ads[data-type="s_std_hor_fb_ads"] {
    width: 468px;
    height: 60px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_horizontal_ads[data-type="s_std_hor_fb_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* SMALL - SQUARE */

/* 200x200 – Small Square */
.small_square_ads[data-type="s_std_sq_ssq_ads"] {
    width: 200px;
    height: 200px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_square_ads[data-type="s_std_sq_ssq_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 250x250 – Square */
.small_square_ads[data-type="s_std_sq_sq_ads"] {
    width: 250px;
    height: 250px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.small_square_ads[data-type="s_std_sq_sq_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* LARGE - HORIZONTAL */

/* 728x90 – Leaderboard */
.large_horizontal_ads[data-type="l_std_hor_lb_ads"] {
    width: 728px;
    height: 90px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.large_horizontal_ads[data-type="l_std_hor_lb_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* LARGE - SQUARE */

/* 300x250 – Medium Rectangle */
.large_square_ads[data-type="l_std_sq_mr_ads"] {
    width: 300px;
    height: 250px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.large_square_ads[data-type="l_std_sq_mr_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 336x280 – Large Rectangle */
.large_square_ads[data-type="l_std_sq_lr_ads"] {
    width: 336px;
    height: 280px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.large_square_ads[data-type="l_std_sq_lr_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* LARGE - VERTICAL */

/* 160x600 – Wide Skyscraper */
.large_vertical_ads[data-type="l_std_ver_ws_ads"] {
    width: 160px;
    height: 600px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.large_vertical_ads[data-type="l_std_ver_ws_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* 300x600 – Half Page */
.large_vertical_ads[data-type="l_std_ver_hp_ads"] {
    width: 300px;
    height: 600px;
    margin: 10px;
    text-align: center;
    position: relative;
}
.large_vertical_ads[data-type="l_std_ver_hp_ads"] img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* Containers pour combiner formats (inchangés) */
.small_vertical_combo {
    display: flex;
    align-items: flex-start;
    margin: 10px;
}
.small_vertical_combo > .small_vertical_ads {
    flex-shrink: 0;
}
.small_vertical_combo > .small_horizontal_group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    gap: 10px;
}

.large_vertical_combo {
    display: flex;
    align-items: flex-start;
    margin: 10px;
}
.large_vertical_combo > .large_vertical_ads {
    flex-shrink: 0;
}
.large_vertical_combo > .small_horizontal_group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    gap: 10px;
}

/* Publicités OVERLAY (inchangées) */
.pub-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    display: flex;
    pointer-events: none;
    padding: 10px 0;
    z-index: 9000;
}
.pub-overlay-left {
    left: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
.pub-overlay-right {
    right: 0;
    justify-content: flex-end;
    align-items: flex-start;
}
.pub-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    gap: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.overlay-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.overlay-row + .overlay-row {
    margin-top: 10px;
}
.pub-overlay-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Media Query Mobile */
	@media (max-width: 480px) {
		.banniere-pub {
			width: 100% !important;
			max-width: none !important;
			flex-wrap: wrap;
		}

		/* Small Ads (16∶9, 9∶16, 1∶1) */
		.small_horizontal_ads[data-type="s_hor_ads"],
		.small_vertical_ads[data-type="s_ver_ads"] {
			width: calc(55% - 10px);
			aspect-ratio: 16 / 9;
			margin: 10px;
		}
		
		.small_square_ads[data-type="s_sq_ads"] {
			width: calc(55% - 10px);
			aspect-ratio: 1 / 1;
			margin: 10px;
		}
		
		.small_horizontal_ads img,
		.small_vertical_ads img,
		.small_square_ads img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* Large Ads full-width */
		.large_horizontal_ads[data-type="l_hor_ads"],
		.large_vertical_ads[data-type="l_ver_ads"],
		.large_square_ads[data-type="l_sq_ads"] {
			width: 100%;
			max-width: none;
			aspect-ratio: 16 / 9;
			margin: 10px auto;
		}
		.large_vertical_ads[data-type="l_ver_ads"] { aspect-ratio:  9 / 16; }
		.large_square_ads[data-type="l_sq_ads"]  { aspect-ratio:  1 / 1; }

		.large_horizontal_ads img,
		.large_vertical_ads img,
		.large_square_ads img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		/* ---------- FORMATS STANDARDS – Responsive ---------- */

/* SMALL - HORIZONTAL */
.small_horizontal_ads[data-type="s_std_hor_ml_ads"] {      /* 320x50 */
    width: 100%;
    aspect-ratio: 32 / 5;
    margin: 10px auto;
}
.small_horizontal_ads[data-type="s_std_hor_lmb_ads"] {     /* 320x100 */
    width: 100%;
    aspect-ratio: 16 / 5;
    margin: 10px auto;
}
.small_horizontal_ads[data-type="s_std_hor_fb_ads"] {      /* 468x60 */
    width: 100%;
    aspect-ratio: 39 / 5;
    margin: 10px auto;
}

/* SMALL - SQUARE */
.small_square_ads[data-type="s_std_sq_ssq_ads"],
.small_square_ads[data-type="s_std_sq_sq_ads"] {           /* 200 & 250 */
    width: calc(50% - 20px);
    aspect-ratio: 1 / 1;
    margin: 10px;
}

/* LARGE - HORIZONTAL */
.large_horizontal_ads[data-type="l_std_hor_lb_ads"] {      /* 728x90 */
    width: 100%;
    aspect-ratio: 728 / 90;
    margin: 10px auto;
}

/* LARGE - SQUARE */
.large_square_ads[data-type="l_std_sq_mr_ads"],            /* 300x250 */
.large_square_ads[data-type="l_std_sq_lr_ads"] {           /* 336x280 */
    width: 100%;
    aspect-ratio: 6 / 5;
    margin: 10px auto;
}

/* LARGE - VERTICAL */
.large_vertical_ads[data-type="l_std_ver_ws_ads"] {        /* 160x600 */
    width: 100%;
    aspect-ratio: 4 / 15;
    margin: 10px auto;
}
.large_vertical_ads[data-type="l_std_ver_hp_ads"] {        /* 300x600 */
    width: 100%;
    aspect-ratio: 1 / 2;
    margin: 10px auto;
}
		
		.close-pub {
			position: absolute;
			top: 0;
			right: -1px;
			width: 7px;
			height: 7px;
			line-height: 7px;
			text-align: center;
			font-size: 0.7rem;
			cursor: pointer;
			color: #3A1E00;
			background-color: #F5E4C3;
			border: 1px solid #3A1E00;
			border-radius: 0;
			z-index: 30;
			transition: all 0.3s ease-in-out;
		}		
	}

/* Bouton de fermeture commun */
	.close-pub {
		position: absolute;
		top: 0;
		right: 0;
		width: 15px;
		height: 15px;
		line-height: 15px;
		text-align: center;
		font-size: 1.2rem;
		cursor: pointer;
		color: #3A1E00;
		background-color: #F5E4C3;
		border: 1px solid #3A1E00;
		border-radius: 0;
		z-index: 30;
		transition: all 0.3s ease-in-out;
	}
	
	.close-pub:hover {
		background-color: #3A1E00;
		color: #F5E4C3;
	}